<template>
	<div>
		<!-- 遍历sections 根据view_type渲染出不同的内容 -->
		<div v-for="(section,index) in sections"  :key="index">
			<gallery-com 
			:gallery="section.body.items"
			v-if="section.view_type==='gallery'">				
			</gallery-com>
			<cell-auto-fill v-if="section.view_type==='cells_auto_fill'" :data="section.body">				
			</cell-auto-fill>
			<ListTwoType13 
			:data="section.body"
			v-if="section.view_type==='list_two_type13'"></ListTwoType13>
			<DeviderLine v-if="section.view_type==='divider_line'" :data="section.body">divider_line</DeviderLine>
			<div v-if="section.view_type==='list_three_type4'">list_three_type4</div>
		</div>
		<!-- 
		gallery幻灯片 
		cells_auto_fill 自适应宽填充
		list_two_type13商品列表
		divider_line 分割线
		list_three_type 商品列表 一行3个？
		-->
	</div>
</template>

<script>
	// 导入组件
	import GalleryCom from  '@/components/GalleryCom.vue'
	import CellAutoFill from '@/components/CellAutoFill.vue'
	import DeviderLine from '@/components/DeviderLine.vue'
	import ListTwoType13 from '@/components/ListTwoType13.vue'
	// 导入请求首页数据的方法
	import {
		GetHomePage
	} from '@/api/home.js'
	export default {
		// 注册挂载组件
		components:{GalleryCom,CellAutoFill,DeviderLine,ListTwoType13},
		data() {
			return {
				// sections每一节的数据
				sections: []
			}
		},
		created() {
			// 执行请求
			GetHomePage(this.item)
				.then(res => {
					console.log("res.data", res.data)
					// 分节数据(是3个data)
					this.sections = res.data.data.data.sections;
				})
				.catch(err => {
					console.error("err", err)
				})
		},
		props: {
			// 父组件传递过来的参数
			item: {
				type: Object,
				default () {
					return {}
				}
			}
		}
	}
</script>

<style>
</style>
